import React from 'react'
import { useParams, Link } from 'react-router-dom'
import TabBar from '../components/TabBar'

const AICompanionDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>()

  return (
    <div className=" bg-[#121212] text-white">
      {/* <StatusBar /> */}
      <div className="pt-0 ">
        <div className="p-4">
          <div className="flex items-center mb-6">
            <Link to="/ai-companion" className="mr-4">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </Link>
            <h1 className="text-xl font-semibold">AI Companion</h1>
          </div>

          <div className="bg-[#1E1E1E] rounded-lg p-4 mb-6">
            <div className="flex items-center mb-4">
              <div className="w-16 h-16 rounded-full bg-[#2C2C2C] flex items-center justify-center mr-4">
                <span className="text-2xl">🤖</span>
              </div>
              <div>
                <h2 className="text-lg font-semibold">AI Companion {id}</h2>
                <p className="text-gray-400">Online</p>
              </div>
            </div>
            <p className="text-gray-300 mb-4">
              I'm your AI companion, ready to chat and help you with anything you need.
            </p>
            <Link
              to={`/ai-companion/${id}/chat`}
              className="w-full bg-[#FF4D4D] text-white py-3 rounded-lg flex items-center justify-center"
            >
              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              Start Chat
            </Link>
          </div>

          <div className="bg-[#1E1E1E] rounded-lg p-4">
            <h3 className="text-lg font-semibold mb-4">About</h3>
            <p className="text-gray-300">
              This AI companion is designed to provide engaging conversations and helpful assistance.
              It can help you with various tasks, answer questions, and provide companionship.
            </p>
          </div>
        </div>
      </div>
      <TabBar />
    </div>
  )
}

export default AICompanionDetail 